<!-- 视图层 -->
<template>
    <div class="miao">
      <div class="tou">
          <span>京东秒杀</span>
          <span class="dao"><b></b><b></b>21:00倒计时</span>
          <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>

          <div class="heng">
        <ul>
      <li v-for="(item,index) in goodslist" :key="index">
          <img :src="item.img2" alt="">
          <p>{{item.originprice}}元</p>
          <b>{{ parseInt(item.originprice*1.4) }}</b>
      </li>
     </ul>
     </div>
      </div>
     
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import { getSeckilllist } from '@/api/home'
  import { onMounted,ref } from 'vue';
  const time = ref(30*60*60*1000) 

  let goodslist = ref([])
  onMounted(()=>{
      getSeckilllist().then(({data:res})=> {
          goodslist.value = res.data
          // console.log(goodslist.value)
      })
      // getSeckilllist().then((res) =>{
      //     console.log(res.data)
      // })
  })
  
  </script>
  
  
  <!-- 样式层 -->
  <style scoped>
  .miao{
      background-color: #fff;
      height: 200px;
  }
  .tou{
      height: 180px;
      background-color: #d42f1c;
      
  }
  span{
      color: #fff;
      font-size: 17px;
      font-weight: 600;
      margin-left: 5px;
      line-height: 45px;
  }
  .dao{
    font-size: 14px;
  }
  .heng{
      height: 100px;
      width: 375px;
      background-color: #d42f1c;
  }
  ul{
      height: 130px;
      width: 320px;
      overflow-x: scroll;
      display: flex;
      background-color: #fff;
      border-radius: 15px;
      margin:auto;
  }
  li{
      margin-top: 20px;
      width: 140px;
      height: 100px;
      margin-left: 10px;
      text-align: center;
  }
  li img{
      width: 50px;
      height: 60px;
      
  }
  li p{
     color: #e12611;
     text-align: center;
     font-size: 15px;
  }
  b{
      margin-left: 5px;
      font-weight: 100;
      text-decoration: line-through;
  }
  .van-count-down{
    width: 140px;
    height: 30px;
    float: right;
    margin-right: 50px;
  }
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: #120101;
    /* margin-top: 10px; */
  }
  
  .block {
    display: inline-block;
    width: 22px;
    height: 30px;
    /* margin-bottom: 10px; */
    color: #fff;
    font-size: 12px;
    line-height: 30px;
    text-align: center;
    background-color: #120101;
  }
  </style>
  